<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <%@ include file="../inc/taglibs.jsp" %>
    <%@ include file="../inc/css.jsp" %>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no">
    <title>问题反馈</title>
    <link rel="stylesheet" type="text/css" href="${contextPath}/static/wechat/css/style.css">
    <script type="text/javascript" src="${contextPath}/static/wechat/js/jquery-1.9.1.js"></script>
    <!-- 引用控制层插件样式 -->
    <link rel="stylesheet" href="${contextPath}/static/wechat/css/zyUpload.css" type="text/css">
    <!-- 引用核心层插件 -->
    <script type="text/javascript" src="${contextPath}/static/wechat/js/zyFile.js"></script>
    <!-- 引用控制层插件 -->
    <script type="text/javascript" src="${contextPath}/static/wechat/js/zyUpload.js"></script>
    <!-- 引用初始化JS -->
    <script type="text/javascript" src="${contextPath}/static/wechat/js/demo.js"></script>
    <!-- 引用上传表单JS -->
    <script src="${contextPath }/static/js/plugins/jquery.uniform.min.js"></script>
    <script src="${contextPath }/static/js/plugins/jquery.form.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".row2-chose input").attr("disabled", "disabled");
            // 点击下拉出现
            var i = 0;
            $(".row2-chose").click(function (e) {
                $(".row2-chose").next(".selcet").slideUp();
                i++;
                if (i == 1) {
                    $(this).next(".selcet").slideDown();
                    i = 1;
                }
                else if (i == 2) {
                    $(this).next(".selcet").slideUp();
                    i = 0;
                }
            });

            // 下拉框超出省略号
            $(".selcet span").each(function () {
                var max = 10;
                if ($(this).text().length > max) {
                    $(this).text($(this).text().substring(0, max) + "……")
                }
            });
            // 选择内容超出省略号
            $(".row2-chose input").each(function () {
                var max = 16;
                if ($(this).val().length > max) {
                    $(this).val($(this).val().substring(0, max) + "……")
                }
            });
        })
    </script>
</head>
<body>
<form action="weixin/info/addQuestion" method="post" id="codeForm" enctype="multipart/form-data">
    <input type="hidden" name="areaId" id="tempAreaId" value=""/>
    <input type="hidden" id="tempLevel"/>
    <input type="hidden" name="typeId" id="tempTypeId" value=""/>
    <input type="hidden" name="memberName" id="tempMemberName" value=""/>
    <input type="hidden" name="contactText" id="tempContactText" value=""/>
    <section class="section">
        <div class="row1">
            <textarea id="textarea" class="input_text" placeholder="请输入详细描述" name="description" autoHeight="true" style="resize: none;"></textarea>
        </div>
    </section>
    <section class="section"></section><!-- 中间空余部位 -->
    <%--<section class="section ">
        <div class="row2 flex-b flex position">
            <div class="type">
                <span>区域</span>
            </div>
            <div class="row2-chose flex flex-b ">
                <input type="text" placeholder="请选择">
                <div class="row2-select">
                    <img src="${contextPath}/static/wechat/img/1.png">
                </div>
            </div>
            <div class="selcet">
                <span onclick="changeBaseSelect(1,this)">协和老厂</span>
                <span onclick="changeBaseSelect(2,this)">全力工厂</span>
                <span onclick="changeBaseSelect(3,this)">泛洲中越</span>
            </div>
        </div>
    </section>--%>
    <section class="section" style="display: none">
        <div class="row2 flex-b flex position">
            <div class="type">
                <span>区域</span>
            </div>
            <div class="row2-chose flex flex-b ">
                <input type="text" placeholder="请选择">
                <div class="row2-select">
                    <img src="${contextPath}/static/wechat/img/1.png">
                </div>
            </div>
            <div class="selcet" id="areaListOne"></div>
        </div>
    </section>
    <section class="section" style="display: none">
        <div class="row2 flex-b flex position">
            <div class="type">
                <span>&nbsp;&nbsp;</span>
            </div>
            <div class="row2-chose flex flex-b ">
                <input type="text" placeholder="请选择">
                <div class="row2-select">
                    <img src="${contextPath}/static/wechat/img/1.png">
                </div>
            </div>
            <div class="selcet" id="areaListTwo"></div>
        </div>
    </section>
    <section class="section" style="display: none">
        <div class="row2 flex-b flex position">
            <div class="type">
                <span>&nbsp;&nbsp;</span>
            </div>
            <div class="row2-chose flex flex-b ">
                <input type="text" placeholder="请选择">
                <div class="row2-select">
                    <img src="${contextPath}/static/wechat/img/1.png">
                </div>
            </div>
            <div class="selcet" id="areaListThree"></div>
        </div>
    </section>
    <section class="section">
        <div class="row2 flex-b flex position">
            <div class="type">
                <span>类型</span>
            </div>
            <div class="row2-chose flex flex-b ">
                <input type="text" placeholder="请选择">
                <div class="row2-select">
                    <img src="${contextPath}/static/wechat/img/1.png">
                </div>
            </div>
            <div class="selcet">
                <c:forEach var="n" items="${typeList}">
                    <span onclick="changeType(${n.id},this)">${n.name}</span>
                </c:forEach>
            </div>
        </div>
    </section>
    <section class="section">
        <div class="row2 flex-b flex position">
            <div class="type">
                <span>责任部门</span>
            </div>
            <div class="row2-chose flex flex-b ">
                <input type="text" placeholder="请选择">
                <div class="row2-select">
                    <img src="${contextPath}/static/wechat/img/1.png">
                </div>
            </div>
            <div class="selcet">
                <c:forEach var="n" items="${wxContactList}">
                    <span onclick="changeContact(${n.id},this)">${n.name}</span>
                </c:forEach>
            </div>
        </div>
    </section>
    <section class="section" style="display: none">
        <div class="row2 flex-b flex position">
            <div class="type">
                <span>责任人</span>
            </div>
            <div class="row2-chose flex flex-b ">
                <input type="text" placeholder="请选择">
                <div class="row2-select">
                    <img src="${contextPath}/static/wechat/img/1.png">
                </div>
            </div>
            <div class="selcet" id="tempUserList"></div>
        </div>
    </section>
</form>
<section class="section"><!-- 上传按钮 -->
    <div class="row1">
        <div id="demo" class="demo"></div>
    </div>
</section><!-- 上传按钮 -->
<footer class="footer" style="background: none;margin-bottom: 50px">
    <input type="button" onclick="subFormInfo()" id="tJBtn" value="提交"/>
</footer>
</body>
<script type="text/javascript">
    $(function () {
        changeBaseSelect();
    });

    $.fn.autoHeight = function () {
        function autoHeight(elem) {
            elem.style.height = 'auto';
            elem.scrollTop = 0; //防抖动
            elem.style.height = elem.scrollHeight + 'px';
        }

        this.each(function () {
            autoHeight(this);
            $(this).on('keyup', function () {
                autoHeight(this);
            });
        });
    }
    $('textarea[autoHeight]').autoHeight();
    // textarea高度自适应

    function chooseSpan(self) {
        var sel = $(self).text();
        $(self).parent("div").prev(".row2-chose").find("input").val(sel);
        $(self).parent("div").slideUp();
    }

    function changeBaseSelect() {
        $('#areaListOne').html('');
        $('#areaListTwo').html('');
        $('#areaListThree').html('');
        $('#tempAreaId').val('');
        $('#areaListOne').parent().parent().css('display', '');
        $('#areaListTwo').parent().parent().css('display', 'none');
        $('#areaListThree').parent().parent().css('display', 'none');

        getAreaListOne();
    }

    function changeBaseSelectTwo(id, size, self) {
        $('#tempLevel').val(size);
        $('#tempAreaId').val(id);
        if (size == 2) {
            $('#areaListTwo').parent().parent().css('display', '');
            $('#areaListThree').parent().parent().css('display', 'none');
        }

        if (size == 3) {
            $('#areaListTwo').parent().parent().css('display', '');
            $('#areaListThree').parent().parent().css('display', '');
        }

        chooseSpan(self);

        getAreaListTwo(id);
    }

    function changeBaseSelectThree(id, size, level, self) {
        chooseSpan(self);

        if (size != level) {
            $('#tempAreaId').val('');
            $('#areaListThree').parent().parent().css('display', '');
            getAreaListThree(id);
        } else {
            $('#tempAreaId').val(id);
        }
    }

    function changeBaseSelectFour(id, self) {
        chooseSpan(self);

        $('#tempAreaId').val(id);
    }

    function changeType(id, self) {
        chooseSpan(self);

        $('#tempTypeId').val(id);
    }

    function changeContact(id, self) {
        $('#tempUserList').parent().parent().css('display', '');
        $('#tempMemberName').val('');

        chooseSpan(self);

        getMemberList(id);

        $('#tempContactText').val($(self).html());
    }

    function changeMember(self) {
        chooseSpan(self);

        $('#tempMemberName').val($(self).html());
    }

    function subFormInfo() {
        var flag = true;

        var textarea = $("#textarea").val();
        var check1 = $("#tempTypeId").val();
        if (null == textarea || textarea == "") {
            alert("请填写内容");
            $("#textarea").focus();
            event.preventDefault();
            flag = false;
        } else if (null == check1 || check1 == "") {
            alert("请选择类型");
            event.preventDefault();
            flag = false;
        }

        if (flag) {
            $('#tJBtn').val("正在提交");
            $('#tJBtn').prop("disabled", true);

            // 提交表单
            $("#codeForm").ajaxSubmit({
                dataType: "json",
                success: function (data) {
                    if (data > 0) {
                        $("#uploadForm").ajaxSubmit({
                            dataType: "json",
                            data: {
                                questionId: data
                            },
                            success: function (result) {
                                if (result > 0) {
                                    // 提交成功后跳转到详情界面
                                    // window.location.href = 'weixin/info/questionInfo?id=' + data;
                                    alert("感谢您，提交成功");
                                } else {
                                    alert("抱歉，提交失败");
                                }
                            }
                        });
                    } else {
                        alert("提交失败");
                    }
                }
            });
        }
    }

    function getAreaListOne() {
        $('#areaListOne').html('');

        $leoman.ajax("weixin/info/areaList", null, function (result) {
            if (null != result) {
                // 获取返回的区域信息，并循环绑定到label中
                var content = "";
                jQuery.each(result, function (i, item) {
                    content += "<span onclick='changeBaseSelectTwo(" + item.id + "," + item.size + ",this)'>" + item.name + "</span>";
                });
                $('#areaListOne').append(content);
            } else {
                alert("获取区域信息失败");
            }
        });
    }

    function getAreaListTwo(areaId) {
        $('#areaListTwo').html('');

        $leoman.ajax("weixin/info/areaListPlus", {
            areaId: areaId
        }, function (result) {
            if (null != result) {
                // 获取返回的区域信息，并循环绑定到label中
                var content = "";
                jQuery.each(result, function (i, item) {
                    content += "<span onclick='changeBaseSelectThree(" + item.id + "," + item.size + "," + item.level + ",this)'>" + item.name + "</span>";
                });
                $('#areaListTwo').append(content);
            } else {
                alert("获取区域信息失败");
            }
        });
    }

    function getAreaListThree(areaId) {
        $('#areaListThree').html('');

        $leoman.ajax("weixin/info/areaListPlus", {
            areaId: areaId
        }, function (result) {
            if (null != result) {
                // 获取返回的区域信息，并循环绑定到label中
                var content = "";
                jQuery.each(result, function (i, item) {
                    content += "<span onclick='changeBaseSelectFour(" + item.id + ",this)'>" + item.name + "</span>";
                });
                $('#areaListThree').append(content);
            } else {
                alert("获取区域信息失败");
            }
        });
    }

    function getMemberList(contactId) {
        $('#tempUserList').html('');

        $leoman.ajax("weixin/info/memberList", {
            contactId: contactId
        }, function (result) {
            if (null == result || result.length == 0) {
                alert("获取部门人员信息失败");
            } else {
                // 获取返回的区域信息，并循环绑定到label中
                var content = "";
                jQuery.each(result, function (i, item) {
                    content += "<span onclick='changeMember(this)'>" + item.name + "</span>";
                });
                $('#tempUserList').append(content);
            }
        });
    }
</script>
</html>